<script setup>
import { Chart } from "@antv/g2";


const container = ref(null);

// 准备数据
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

let chart = null;
// 渲染条形图
const renderBarChart = (container) => {
  chart = new Chart({
    container,// 容器
    data: data,// 数据
    width : 400,// 宽度
    height : 400,// 高度
    title : { // 标题
      title : '条形图',//主标题
      subtitle : '', //副标题
    },
    encode : {
      x : 'genre', // x轴字段  需要和数据字段对应
      y : 'sold',  // y轴字段  需要和数据字段对应
      color : 'genre', // 柱形图颜色
      key : 'genre',   // 动画字段
      enterDuration : 1000 , // 动画时长
    },
    tooltip : false,
  });
  // 渲染可视化
  chart.interval();
  chart.render();
  return chart;
}

onMounted(() => {
  renderBarChart(container.value);
});
</script>

<template>
  <div ref="container"></div>
</template>

<style>

</style>
